<#assign secSelect = JspTaglibs["http://www.casic304.cn/secSelect"] />
<#assign dicSelect = JspTaglibs["http://www.casic304.cn/dicSelect"]/>
<#assign fillDept=JspTaglibs["http://www.casic304.cn/fillDept"] />
<html>
<head>
    <meta charset="utf-8">
    <title>飞行成功率统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <style>
        .echarts-div #container{
            height: 500px;margin-right: 36px
        }
        .echarts-div #containerZhexian{
            height: 500px;
        }
        .echarts-div{
            position: absolute;top: 100px;left: 16px;right: 16px; bottom: 16px;overflow: auto;
            padding-top: 16px;
        }
        @media screen and (min-width: 1280px){
            .chartDiv{
                width: 45%;
                float: left;
            }
        }
        @media screen and (min-width: 804px) and (max-width:1280px){
            .chartDiv {
                width: 96%;
                float: left;
            }
        }
        @media screen and (min-width: 704px) and (max-width:1380px){
            .chartParDiv {
               top:138px
            }
            #containerZhexian{margin-top: 16px}
        }
        .selch .layui-icon-date {
            top: 6px !important;
        }
    </style>
</head>
<body class="listBody">
<div class="qbdms-list">
    <div class="layui-table-view-body" style="padding: 14px;height: 100%;position: relative">
        <div class="ccpui-enterSel">
            <form class="layui-form" action="" lay-filter="flightSuccessStatisticsQueryForm">
                <div class="layui-form-body selch">
                    <div class="table-top-filter layui-row">
                        <div class="qbdms-listForm">
                            <label class="layui-form-label">试验开始日期</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input filter-value dateTimeFiled" name="Q_beginTestdate_S" lay-verify="required" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="qbdms-listForm">
                            <label class="layui-form-label">试验结束日期</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input filter-value dateTimeFiled" name="Q_endTestdate_S" lay-verify="required" placeholder="请输入"/>
                            </div>
                        </div>

                        <div class="qbdms-listForm">
                            <label class="layui-form-label">导出图片格式</label>
                            <div class="layui-input-block">
                                <select name="imageFormat" autocomplete="off"
                                        class="layui-input" fieldname="imageFormat"
                                        lay-filter="imageFormat" id="imageFormat" lay-verify="required">
                                    <option value="JPEG">JPEG</option>
                                    <option value="PNG">PNG</option>
                                </select>
                            </div>
                        </div>

                        <div class="selchBtn">
                            <a class="layui-btn layui-btn-sm fillBtn" lay-filter="query" lay-event="query" lay-submit qbdms-event="query" id="query">
                                <i class="layui-icon layui-icon-search"></i><span>查询</span>
                            </a>
                            <div class="layui-btn-group">
                                <button type="reset" class="layui-btn layui-btn-sm" lay-filter="clears" lay-event="clears" qbdms-event="clears" style="width: 28px;font-size: 12px;padding: 0">
                                    <i class="iconfont data-iconcommon_refresh"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="echarts-div chartParDiv">
            <div id="container" class="chartDiv"></div>
            <div id="containerZhexian" class="chartDiv"></div>
        </div>
    </div>
</div>

<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/qbdmsStatic/public/echarts.min.js"></script>
<script>

    layui.config({
        base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table', 'common','jquery','layer','laydate','publicMethods', 'qbdmsForm','propsHandle'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.qbdmsForm;
        var publicMethods=layui.publicMethods;
        var dom = document.getElementById("container");
        var domZhexian = document.getElementById("containerZhexian");
        var myChart = echarts.init(dom);
        var myChartZhexian = echarts.init(domZhexian);

        var propsHandle = layui.propsHandle;
        var defProps = {
                //viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
                viewMould: 'moulds/', // 组件模块 存放文件 *****
                selectorBtn: '.selectorBtn'
            },
            temQuery = new propsHandle();  // 实例化模板功能部分
        temQuery.initTem({
            selectorBtn: defProps.selectorBtn,
            selectorTemPath: setter.views + defProps.viewMould
        });
        form.render();
        var dateTimeFiledLen = $(".dateTimeFiled");
        for(var i=0;i<dateTimeFiledLen.length;i++){
            laydate.render({
                elem: dateTimeFiledLen[i] //指定元素
                ,type: 'month'
                ,trigger: 'click'
            });
        }
        var flightResult = ${flightResult};
        var modelDevelopPhase = ${modelDevelopPhase};
        var dataList = ${dataList};
        var maxScret = "${maxScret}";
        var sucMaxSecret = "${sucMaxSecret}";

        var beginTestdate = "${beginTestdate}";
        var endTestdate = "${endTestdate}";

        form.on('submit(query)',function () {
            beginTestdate = $("input[name='Q_beginTestdate_S']").val();
            endTestdate = $("input[name='Q_endTestdate_S']").val();
            $.ajax({
                url: '${ctx}/qbdms/flightSuccessStatistics/getChartData?beginTestdate='+beginTestdate + '&endTestdate='+endTestdate,
                type: 'post',
                async:false,
                dataType: 'json',
                success:function (data) {
                    var returnData = data.data;
                    flightResult = returnData.flightResult;
                    modelDevelopPhase = returnData.modelDevelopPhase;
                    dataList = returnData.dataList;

                    beginTestdate = returnData.beginTestdate;
                    endTestdate = returnData.endTestdate;

                    var ee = eval(returnData.dataList);

                    queryZhu(eval(returnData.flightResult),ee,eval(returnData.modelDevelopPhase),returnData.beginTestdate,returnData.endTestdate);
                }
            })
        })

        //关闭当前页面
        $("#closeWindow").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        })

        queryZhu(flightResult,dataList,modelDevelopPhase,beginTestdate,endTestdate);

        function queryZhu(flightResult,dataList,modelDevelopPhase,beginDate,endDate) {
            var newSeries = [];
            for(var i=0;i<flightResult.length;i++){

                var arr = JSON.parse('[' + String(dataList[i]) + ']')
                var ser = {
                    name: flightResult[i],
                    type: 'bar',
                    stack: '弹框',
                    barMaxWidth:40,
                    data: arr[0]
                };
                newSeries.push(ser);
            }

            var option = {
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:"JPEG"
                        }
                    }
                },
                color:['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E86452','#6DC8EC','#945FB9','#FF9845','#1E9493','#FF99C3'],
                title: {
                    text: beginDate + "至" + endDate + '数据组合柱形图' + maxScret,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    left: 'center',
                    bottom: '0px',
                    data: flightResult
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    // bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: modelDevelopPhase
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '个数'
                    }
                ],
                series:newSeries
            };
//            if (option && typeof option === "object") {
                myChart.setOption(option);
//            }
            myChart.setOption({
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                }
            })
        }

/*---------------------------------------------------------------------折线图--------------------------------------------------------------------------------------------*/

        var dataListZhe = ${dataListZhe};
        var modelDevelopPhaseZhe = ${modelDevelopPhaseZhe};
        var years = ${years};

        var newSeriesZhe = [];

        for(var j=0;j<modelDevelopPhaseZhe.length;j++){
            var arr = JSON.parse('[' + String(dataListZhe[j]) + ']')
            var ser = {
                name: modelDevelopPhaseZhe[j],
                type: 'line',
                stack: '总量'+j,
                data: arr[0]
            };
            newSeriesZhe.push(ser);
        }

        var yearStr = "";
        for(var i=0;i<years.length;i++){
            yearStr = yearStr + years[i] + ",";
        }
        yearStr = yearStr.substring(0,yearStr.length - 1);

        var optionZhexian = {
            title: {
//                text: 1
                text: yearStr + '飞行试验成功率对比'+sucMaxSecret
            },
            color:['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E86452','#6DC8EC','#945FB9','#FF9845','#1E9493','#FF99C3'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                left: 'center',
                bottom: '0px',
                data: modelDevelopPhaseZhe
            },
            grid: {
                left: '3%',
                right: '4%',
                // bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        type:"JPEG"
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: years
            },
            yAxis: {
                type: 'value',
                name: "百分比"
            },
            series: newSeriesZhe
        };
        if (optionZhexian && typeof optionZhexian === "object") {
            myChartZhexian.setOption(optionZhexian);
        };

        form.on('select(imageFormat)', function (data){
            var imageFormat = data.value;
            myChart.setOption({
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:imageFormat
                        },
                    }
                }
            });
            myChartZhexian.setOption({
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:imageFormat
                        },
                    }
                }
            })
        });

        myChart.on('click',function(params){
            var height=publicMethods.layHeight('.listBody');
            layer.open({
                type: 2,
                skin:'qbdms-layerFormBtn',
                area: ['90%', height],
                title: ['图表详情'],
                content: '${ctx}/qbdms/flightSuccessStatistics/view/showList?name='+ params.name + '&seriesName='+params.seriesName + '&beginDate=' + beginTestdate + '&endDate=' + endTestdate,
                success:function (layero, index) {
                    publicMethods.tipsAuto(layero.find('.layui-layer-setwin'),'点击这里关闭弹框哦',2000)
                }
            });
        });

    });
</script>
</body>
</html>